<script setup lang="ts">
import Screenfull from 'screenfull'
import { FullScreen } from '@element-plus/icons-vue'

const state = reactive({
  title: '全屏',
  icon: true,
})
const { icon, title } = toRefs(state)

const handleFullScreen = () => {
  if (!Screenfull.isEnabled) {
    // Message.warning('you browser can not work')
    return false
  }

  Screenfull.toggle()
  const isFullscreen = Screenfull.isFullscreen
  state.icon = isFullscreen
  state.title = isFullscreen ? '全屏' : '退出'
}
</script>
<template>
  <div class="app-fullscreen relative top-2px" @click="handleFullScreen">
    <el-tooltip :content="title">
      <template v-if="icon">
        <el-icon><FullScreen /></el-icon>
      </template>
      <IMaterialSymbolsFullscreenExit v-else />
    </el-tooltip>
  </div>
</template>
